<template>
  <a-card :bordered="false" class="card-area">
    <a-row style="height: 1024px">
      <a-col span="4">
        <a-menu :defaultSelectedKeys="keys">
          <!--套餐类型 1套餐方案 2膳食方案 3运动方案-->
          <a-menu-item @click="searchQuery(1)" key="1">管家方案</a-menu-item>
          <a-menu-item @click="searchQuery(2)" key="2">饮食疗养</a-menu-item>
          <!--          <a-menu-item @click="searchQuery(3)" key="3">运动疗养</a-menu-item>-->
          <a-menu-item @click="searchQuery(4)" key="4">营养疗养</a-menu-item>
          <a-menu-item @click="searchQuery(5)" key="5">其他疗养</a-menu-item>
        </a-menu>
      </a-col>
      <a-col span="1">&nbsp;</a-col>
      <a-col span="19">
        <div>
          <div class="table-page-search-wrapper">
            <a-form layout="inline" :label-col="labelCol" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :md="5" :sm="8">
                  <a-form-item label="风险等级">
                    <j-dict-select-tag placeholder="请选择风险等级" dictCode="risk_level" v-model="queryParam.busValue" />
                  </a-form-item>
                </a-col>
                <a-col :md="5" :sm="8">
                  <a-form-item label="商品名称">
                    <a-input placeholder='支持模糊查询' v-model='queryParam.projectName'></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="5" :sm="8"  v-if="tab==5">
                  <a-form-item label="服务类型">
                    <a-select v-model="queryParam.packageType" placeholder="请选择服务类型">
                      <a-select-option value="5">精神/心理疗养</a-select-option>
                      <a-select-option value="6">物理冶疗</a-select-option>
                      <a-select-option value='7'>监测设备</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :md="6" :sm="24">
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>

              </a-row>
            </a-form>
          </div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">

            <template slot="avatarslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <a-avatar shape="square" :src="record.goodsImg" icon="user" />
              </div>
            </template>
            <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">详情</a>
          <a-divider type="vertical" />
          <a @click="handleSubscribe(record,'1')" v-if="record.izUse==='0'">认购</a>
          <a @click="handleSubscribe(record,'2')" v-if="record.izUse==='1'">取消认购</a>
        </span>

          </a-table>
        </div>

      </a-col>
    </a-row>
    <goods-info-modal ref="modalForm" @ok="modalFormOk"></goods-info-modal>
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { putAction, getAction, postAction, getFileAccessHttpUrl } from '@/api/manage'
import { frozenBatch } from '@/api/api'
import GoodsInfoModal from './modules/GoodsInfoModal'

export default {
  name: 'ord_store_infoList',
  mixins: [JeecgListMixin],
  components: {
    GoodsInfoModal
  },
  data() {
    return {
      description: '门店管理页面',
      labelCol: { style: { width: '80px' } },
      queryParam: { 'packageType': '1' },
      disableMixinCreated: true,
      keys: ['1'],
      // 表头
      columns: [
        {
          title: '风险等级',
          align: 'center',
          dataIndex: 'busValue',
          width: 100
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goodsName',
          width: 160
        },
        {
          title: '图片',
          align: 'center',
          dataIndex: 'goodsImg',
          scopedSlots: { customRender: 'avatarslot' },
          width: 130
        },
        {
          title: '价格',
          align: 'center',
          dataIndex: 'price',
          width: 110
        },
        {
          title: '简介',
          align: 'center',
          dataIndex: 'situation',
          width: 160
        },
        {
          title: '是否认购',
          align: 'center',
          dataIndex: 'izUse',
          customRender: (text, record, index) => {
            if (text == '1') {
              return '已认购'
            } else {
              return '未认购'
            }
          },
          width: 120
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 130
        }
      ],
      url: {
        list: '/store/machine/list',
        bind: '/store/machine/bind',
        unbind: '/store/machine/unbind'
      },
      tab: 0
    }
  },
  computed: {},
  created() {
    this.searchQuery('1')
  },
  methods: {
    getAvatarView: function(avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    searchQuery(categoryCode) {
      if(categoryCode!=undefined){
        this.tab = categoryCode
        this.queryParam.packageType = categoryCode+""
      }
      this.loadData()
    },
    handleSubscribe(record, type) {
      const that = this
      postAction(type == '1' ? that.url.bind : that.url.unbind, {
        code: record.code
      }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.reCalculatePage(that.selectedRowKeys.length)
          that.$message.success(res.message)
          that.loadData()
          that.onClearSelected()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
